<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style>
		.container {
			width: 300px;
			height: 300px;
			background-color: skyblue;
			display: grid;
			grid-template-rows: 100px 100px 100px;
			grid-template-columns: 100px 100px 100px;
			grid-template-areas:
				"a b c"
				"d e f"
				"g h i"
			;
		}

		.container div {
			width: 50px;
			height: 50px;
			background-color: sienna;

			grid-area: e;
			/* 单独控制这个子项的对齐方式 */
			/* justify-self: center;
			align-self: center; */
			/* 复合写法：前者水平，后者垂直方向 */
			place-self: start center;
		}
	</style>
</head>

<body>
	<div class="container">
		<div>01</div>
	</div>
</body>

</html>